<template>
  <!-- 编辑目录 弹出层-->
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="val.upd_dir"
    :title="`编辑目录 -> ${val.upd_dir_name}`"
  >
  </component>

  <!-- 加载攻略 弹出层-->
  <component
    wd="1100"
    :is="cfg.model"
    v-model:window_open="val.model_loadgl"
    :title="`${val.load_data?.n_name}`"
  >
    <template #content>
      <n-spin :show="val?.load_data?.n_name == null">
        <template #description> 攻略加载中 </template>

        <div style="min-height: 100vh">
          <div class="_box0" style="min-height: 75vh">
            <div class="_box2" style="min-height: 75vh">
              <div class="_gltitle">
                <div class="__by">作者：{{ val.load_data?.by }}</div>
              </div>
              <n-hr />
              <div class="__tips">[ 点击图片获取原图 ]</div>

              <n-scrollbar v-if="cfg.mobile == false" x-scrollable>
                <div v-if="val.load_data?.img != null">
                  <el-image
                    style="width: 100%; justify-content: center"
                    :preview-src-list="[cfg.cdn3 + val.load_data?.img]"
                    :hide-on-click-modal="true"
                    :preview-teleported="true"
                    show-progress
                    fit="cover"
                    :src="cfg.cdn3 + val.load_data?.img + '&w=1043'"
                  >
                  </el-image>
                </div>
              </n-scrollbar>
              <div v-else>
                <a :href="cfg.cdn3 + val.load_data?.img" target="_blank">
                  <div
                    style="display: flex; margin: 0px auto; flex-direction: column"
                    v-if="val.load_data?.img != null"
                  >
                    <img :src="cfg.cdn3 + val.load_data?.img + '&w=755'" />
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </n-spin>
    </template>
    <template #footer>
      <n-button
        v-if="cfg.qxpd(['bz']) == true"
        type="gt_y"
        @click="ct.edit_gl(val.load_data?._id?.$oid)"
        :size="cfg.sizebtn"
        >编辑攻略</n-button
      >
      <n-button
        v-if="cfg.qxpd(['bz']) == true"
        type="gt_n"
        @click="ct.del_gl(val.load_data?._id?.$oid)"
        :size="cfg.sizebtn"
        >删除攻略</n-button
      >
    </template>
  </component>
  <!-- 编辑攻略 弹出层-->
  <component wd="1100" :is="cfg.model" v-model:window_open="val.model_editgl" :title="``">
    <template #content>
      <n-spin :show="val?.load_data?.n_name == null || val.upd_loading == true">
        <template #description> Loading... </template>

        <div style="min-height: 250px">
          <div class="stitle">· 攻略信息 ·</div>
          <div class="_box0">
            <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>所属分类：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.edit_data.web_type"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>攻略名称：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.edit_data.web_name"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>作者信息：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.edit_data.by"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>排序优先级：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.edit_data.px"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <!--
                <n-gi span="2">
                  <div class="_banr">
                    <div class="_2_title2" style="width: 125px">
                      <div>攻略类型：</div>
                    </div>
                    <div class="_2_val">[BOT型纯图片] / [网页文章]</div>
                  </div>
                </n-gi>
                -->
              <n-gi span="2">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>更新图片：</div>
                  </div>
                  <div class="_2_val">
                    <n-upload
                      list-type="image-card"
                      :action="`https://gtimg.ww2.ren/upload.php?type=upimg_v2&authkey=${cfg.user?.authkey}&uid=${cfg.user?.uid}`"
                      @change="ct.imgchange"
                      @finish="ct.imgfin"
                      @remove="ct.imgremove"
                      :max="1"
                    >
                      <n-upload-dragger> 上传图片 </n-upload-dragger>
                    </n-upload>
                  </div>
                </div>
              </n-gi>
              <n-gi span="2">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>标记折叠：</div>
                  </div>
                  <div class="_2_val">
                    <n-space item-style="display: flex;" align="center">
                      <n-checkbox v-model:checked="val.edit_data.check_fold">
                        折叠攻略
                      </n-checkbox>
                      <n-checkbox v-model:checked="val.edit_data.check_updstop">
                        已停更
                      </n-checkbox>
                      <n-checkbox v-model:checked="val.edit_data.check_hide">
                        隐藏攻略
                      </n-checkbox>
                    </n-space>
                  </div>
                </div>
              </n-gi>
            </n-grid>
          </div>
          <n-collapse v-if="val.edit_data?.ver == null">
            <n-collapse-item title="旧设置信息" name="1">
              <div class="_box0">
                <div>- 当前攻略为旧版攻略，以下信息需要手动填写</div>
                <div>- 修改后请前往云指令更新云指令信息</div>
                <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
                  <n-gi span="1">
                    <div class="_banr">
                      <div class="_2_title2" style="width: 125px">
                        <div>云指令目录名称：</div>
                      </div>
                      <div class="_2_val">
                        <n-input
                          :size="cfg.sizebtn"
                          v-model:value="val.edit_data.n_dir"
                        ></n-input>
                      </div>
                    </div>
                  </n-gi>
                  <n-gi span="1">
                    <div class="_banr">
                      <div class="_2_title2" style="width: 125px">
                        <div>云指令攻略名称：</div>
                      </div>
                      <div class="_2_val">
                        <n-input
                          :size="cfg.sizebtn"
                          v-model:value="val.edit_data.n_name"
                        ></n-input>
                      </div>
                    </div>
                  </n-gi>
                </n-grid>
              </div>
            </n-collapse-item>
          </n-collapse>
          <div style="margin-top: 8px"></div>
        </div>
      </n-spin>
    </template>
    <template #footer>
      <n-spin :show="val?.load_data?.n_name == null || val.upd_loading == true">
        <n-button
          v-if="cfg.qxpd(['bz']) == true"
          type="gt_y"
          @click="ct.edit_sub"
          :size="cfg.sizebtn"
          >提交编辑信息</n-button
        >
      </n-spin>
    </template>
  </component>
  <!-- 上传攻略 弹出层-->
  <component
    wd="1100"
    :is="cfg.model"
    v-model:window_open="val.model_newgl"
    :title="`上传攻略`"
  >
    <template #content>
      <n-spin :show="val.new_loading == true">
        <div style="min-height: 250px">
          <div class="stitle">· 攻略信息 ·</div>
          <div class="_box0">
            <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>所属分类：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.new_data.web_type"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>攻略名称：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.new_data.web_name"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>作者信息：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.new_data.by"
                    ></n-input>
                  </div>
                </div>
              </n-gi>
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>排序优先级：</div>
                  </div>
                  <div class="_2_val">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="val.new_data.px"
                    ></n-input>
                  </div>
                </div>
              </n-gi>

              <n-gi span="2">
                <div class="_banr">
                  <div class="_2_title2" style="width: 125px">
                    <div>上传图片：</div>
                  </div>
                  <div class="_2_val">
                    <n-upload
                      list-type="image-card"
                      :action="`https://gtimg.ww2.ren/upload.php?type=upimg_v2&authkey=${cfg.user?.authkey}&uid=${cfg.user?.uid}`"
                      @change="ct.imgchange_new"
                      @finish="ct.imgfin_new"
                      @remove="ct.imgremove_new"
                      :max="1"
                    >
                      <n-upload-dragger> 上传图片 </n-upload-dragger>
                    </n-upload>
                  </div>
                </div>
              </n-gi>
            </n-grid>
          </div>
        </div>
      </n-spin>
    </template>
    <template #footer>
      <n-spin :show="val.new_loading == true">
        <n-button type="gt_y" @click="ct.new_sub" :size="cfg.sizebtn">提交攻略</n-button>
      </n-spin>
    </template>
  </component>

  <el-image-viewer
    v-if="val.showPreview"
    show-progress
    :teleported="true"
    :hide-on-click-modal="true"
    :zoom-rate="1.1"
    :url-list="val.srcList"
    fit="cover"
    @close="val.showPreview = false"
  />
  <div class="_mbbox nbox1">
    <template v-if="cfg.qxpd(['bz']) == true">
      <div>
        <n-space justify="center">
          <n-button @click="ct.newgl" :size="cfg.sizebtn" type="gt_y">上传攻略</n-button>
        </n-space>

        <n-hr />
        <n-select
          v-model:value="val.so_gl"
          filterable
          placeholder="输入搜索攻略，含已被折叠/隐藏的攻略"
          :options="val.options"
          @update:value="ct.sea"
        />
      </div>
    </template>

    <n-select
      v-if="cfg.qxpd(['bz']) == false"
      v-model:value="val.so_gl"
      filterable
      placeholder="输入搜索攻略，含已被折叠/隐藏的攻略"
      :options="val.options"
      @update:value="ct.sea"
    />

    <n-grid y-gap="12" :cols="1">
      <template v-for="item in val.idx_list">
        <n-gi>
          <div class="nbox1">
            <n-h3 style="margin: 0">＃{{ item.dirname }}</n-h3>
            <n-grid
              v-if="cfg.mobile == false"
              x-gap="8"
              y-gap="8"
              :cols="parseInt(cfg.sswd / 250)"
            >
              <n-gi v-for="item2 in item.data">
                <div class="data2" @click="ct.load_gl(item2)">{{ item2.name }}</div>
              </n-gi>
            </n-grid>
            <n-grid v-else x-gap="6" y-gap="6" :cols="parseInt(cfg.sswd / 150)">
              <n-gi v-for="item2 in item.data">
                <template v-if="cfg.qxpd(['bz']) == true">
                  <div class="data2_m" @click="ct.load_gl(item2)">{{ item2.name }}</div>
                </template>
                <template v-else>
                  <a :href="`${cfg.cdn3}${item2.img}`" target="_blank">
                    <div class="data2_m">{{ item2.name }}</div>
                  </a>
                </template>
              </n-gi>
            </n-grid>
          </div>
        </n-gi>
      </template>
    </n-grid>
  </div>
</template>
<style scoped>
.__by {
  font-size: 1.2em;
}
.__tips {
  text-align: center;
  color: var(--v2-tc-3);
  padding-bottom: 8px;
}
.__title {
  text-shadow: 0 0 3px #000;
  font-size: 1.3em;
  color: var(--base-font-hover-color);
}
._gltitle {
  text-align: center;
}
._gtbox ._ntitle {
  text-shadow: 0 0 3px #000;
  font-size: 1.15em;
  color: var(--base-font-hover-color);
}
._gtbox {
  display: flex;
  justify-content: space-between;
}
.data2:hover {
  background-color: var(--data2-hbg);
  color: var(--data2-hcolor);
}

.data2 {
  display: flex;
  padding: 6px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-shadow: var(--data2-tsd);
  background-color: var(--bg5);
  border-radius: 3px;
}
.data2_m {
  display: flex;
  padding: 6px;
  font-size: 0.8em;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-shadow: var(--data2-tsd);
  background-color: var(--bg5);
  box-shadow: var(--data2-sd);
  border-radius: 3px;
}
.data {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 15px;
  border-radius: 8px;
  background-color: #3d4656;
  padding: 8px;
}
@media (max-width: 428px) {
  .data2_m {
    font-size: var(--def-14px);
  }
  ._gtbox ._ntitle[data-v-8eb8ae27] {
    font-size: var(--def-17px);
  }
}
</style>
<script>
import idc_img from "./comp/idc_img.vue";
import { cfg } from "@/cfg/cfg.js";

export default defineComponent({
  emits: ["update_load"],
  setup(props, { emit }) {
    const comp = {
      img: idc_img,
    };

    let val = reactive({
      upd_dir: false,
      showPreview: false,
      upd_loading: false,
      new_loading: false,
      new_data: {},
      srcList: [],
      ckname: null,
      model_editgl: false,
      load_data: {},
      options: [],
      load: {},
      idx_list: {},
      idx_list_def: ["综合攻略", "pve攻略", "pvp攻略", "角色评分", "会战评分"],
    });

    let ct = {
      //新增攻略
      newgl: () => {
        val.new_data = {
          upd: {},
        };
        val.model_newgl = true;
      },
      //删除攻略
      del_gl: (id) => {
        //对话框确定和取消
        cfg.alert.warning({
          title: "警告",
          content: "确定要删除该攻略吗？",
          positiveText: "确定删除",
          negativeText: "撤销",
          draggable: true,
          onPositiveClick: async () => {
            cfg.msg.success("删除攻略中...");
            let res = await cfg.axios.post(`${cfg.url}`, val.edit_data, {
              params: {
                t: "v2/get",
                t2: "introduction/gtidc",
                t3: "v2_del_gtidc",
                authkey: cfg.user?.authkey,
                uid: cfg.user?.uid,
                id: id,
              },
            });
            val.model_loadgl = false;
            cfg.msg.success("删除成功");
            await ct.get_list();
          },
          onNegativeClick: () => {},
        });
      },
      //编辑图片-上传文件状态
      imgchange: (e) => {
        const file = e.file;
        switch (file.status) {
          case "pending": {
            val.upd_loading = true;
            break;
          }
          case "uploading": {
            val.upd_loading = true;
            break;
          }
          case "finished": {
            val.upd_loading = false;
            break;
          }
          default:
            break;
        }
      },
      //上传攻略-上传文件状态
      imgchange_new: (e) => {
        const file = e.file;
        switch (file.status) {
          case "pending": {
            val.new_loading = true;
            break;
          }
          case "uploading": {
            val.new_loading = true;
            break;
          }
          case "finished": {
            val.new_loading = false;
            break;
          }
          default:
            break;
        }
      },
      //编辑图片-上传文件完成
      imgfin: (e) => {
        val.upd_loading = true;
        try {
          let obj = JSON.parse(e.event.target.response);
          if (obj.code == -1) {
            val.upd_loading = false;
            e.file.status = "error";
            cfg.msg.error("上传失败，" + obj.msg);
            return false;
          }
          val.upd_loading = false;
          obj.data.fid = e.file.id;
          val.edit_data.upd = obj.data;
        } catch (error) {
          val.upd_loading = false;
          cfg.msg.error("上传失败，" + error);
          e.file.status = "error";
          return false;
        }
      },
      //上传图片-上传文件完成
      imgfin_new: (e) => {
        val.new_loading = true;
        try {
          let obj = JSON.parse(e.event.target.response);
          if (obj.code == -1) {
            val.new_loading = false;
            e.file.status = "error";
            cfg.msg.error("上传失败，" + obj.msg);
            return false;
          }
          val.new_loading = false;
          obj.data.fid = e.file.id;
          val.new_data.upd = obj.data;
        } catch (error) {
          val.new_loading = false;
          cfg.msg.error("上传失败，" + error);
          e.file.status = "error";
          return false;
        }
      },
      //编辑图片-删除上传文件
      imgremove: async (e) => {
        val.edit_data.upd = null;
        if (val.edit_data?.upd?.id == null) {
          return;
        }
        val.upd_loading = true;
        try {
          let res = await cfg.axios.get(`https://gtimg.ww2.ren/upload.php`, {
            params: {
              authkey: cfg.user?.authkey,
              uid: cfg.user?.uid,
              type: "delete",
              fileid: val.edit_data.upd.id,
            },
          });
          val.upd_loading = false;
        } catch (error) {
          val.upd_loading = false;
          cfg.msg.error("删除失败" + error);
        }
      },
      //上传图片-删除上传文件
      imgremove_new: async (e) => {
        if (val.new_data?.upd?.id == null) {
          return;
        }
        val.new_loading = true;
        try {
          let res = await cfg.axios.get(`https://gtimg.ww2.ren/upload.php`, {
            params: {
              authkey: cfg.user?.authkey,
              uid: cfg.user?.uid,
              type: "delete",
              fileid: val.new_data.upd.id,
            },
          });
          val.new_data.upd = null;
          val.new_loading = false;
        } catch (error) {
          val.new_loading = false;
          cfg.msg.error("删除失败" + error);
        }
      },
      //使用elm图片预览
      img_preview: (e) => {
        try {
          cfg.msg.success(`右键可复制下载原图..`);
          val.showPreview = true;
        } catch (error) {
          alert(error);
        }
      },
      //提交编辑攻略
      edit_sub: async () => {
        val.upd_loading = true;
        let res = await cfg.axios.post(`${cfg.url}`, val.edit_data, {
          params: {
            t: "v2/get",
            t2: "introduction/gtidc",
            t3: "v2_upd_gtidc",
            authkey: cfg.user?.authkey,
            uid: cfg.user?.uid,
          },
        });
        if (res.status == 200) {
          cfg.msg.success(res.data.msg);
          val.model_editgl = false;
          val.model_loadgl = false;
          val.upd_loading = false;
          await ct.get_list();
          return true;
        } else {
          cfg.msg.error(`提交攻略信息失败`);
          val.model_editgl = false;
          val.upd_loading = false;
          return false;
        }
      },
      //提交新增攻略
      new_sub: async () => {
        val.new_loading = true;
        let res = await cfg.axios.post(`${cfg.url}`, val.new_data, {
          params: {
            t: "v2/get",
            t2: "introduction/gtidc",
            t3: "v2_save_gtidc",
            authkey: cfg.user?.authkey,
            uid: cfg.user?.uid,
          },
        });
        if (res.status == 200) {
          if (res.data.code == -1) {
            cfg.msg.error(res.data.msg);
            val.new_loading = false;
          } else {
            cfg.msg.success(res.data.msg);
            val.model_newgl = false;
            val.new_loading = false;
            await ct.get_list();
          }
          return true;
        } else {
          cfg.msg.error(`提交攻略信息失败`);
          val.model_newgl = false;
          val.new_loading = false;
          return false;
        }
      },
      //编辑攻略
      edit_gl: async (id) => {
        val.model_editgl = true;
        val.edit_data = {};
        val.upd_loading = true;
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "introduction/gtidc",
            t3: "get_idc",
            t4: "all",
            id: id,
          },
        });
        if (res.status == 200) {
          res = res.data;
          val.edit_data = res.data;
          if (val.edit_data.web_name == null) {
            val.edit_data.web_name = val.edit_data.n_name;
          }
          if (val.edit_data.web_type == null) {
            val.edit_data.web_type = val.edit_data.n_dir;
          }
          val.upd_loading = false;
          return true;
        } else {
          val.model_editgl = false;
          val.upd_loading = false;
          cfg.msg.error(`获取攻略失败`);
          return false;
        }
        return true;
      },
      //搜索攻略选中
      sea: async (id, e) => {
        val.load_data = {};
        if (cfg.mobile == true && cfg.qxpd(["bz"]) == false) {
          const a = document.createElement("a");
          a.href = `${cfg.cdn3}${e.img}`;
          a.target = "_blank";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          return true;
        } else {
          if (cfg.qxpd(["bz"]) == false) {
          } else {
            val.model_loadgl = true;
          }
        }
        await ct.load_gl_2(id);
        return true;
      },
      //攻略加载
      load_gl_2: async (id) => {
        val.load_data = {};
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "introduction/gtidc",
            t3: "get_idc",
            id: id,
          },
        });
        if (res.status == 200) {
          res = res.data;
          if (cfg.mobile == true && cfg.qxpd(["bz"]) == false) {
            location.href = `${cfg.cdn3}${res.data.img}`;
            return true;
          } else {
            if (cfg.qxpd(["bz"]) == false) {
              val.srcList = [`${cfg.cdn3}${res.data.img}`];
              ct.img_preview();
            } else {
              val.load_data = res.data;
            }
          }
          return true;
        } else {
          val.model_loadgl = false;
          cfg.msg.error(`获取攻略失败`);
          return false;
        }
      },
      //查看攻略
      load_gl: async (item) => {
        val.load = item;
        val.load_data = {};
        if (cfg.mobile == true && cfg.qxpd(["bz"]) == false) {
          cfg.msg.success(`加载攻略中...`);
        } else {
          if (cfg.qxpd(["bz"]) == false) {
          } else {
            val.model_loadgl = true;
          }
        }
        await ct.load_gl_2(item.id);
        return true;
      },
      //编辑目录信息
      upd_dir: (dirname) => {
        val.upd_dir_name = dirname;
        val.upd_dir = true;
      },
      //获取攻略列表
      get_list: async () => {
        val.idx_list = {};
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "introduction/gtidc",
            t3: "get_list",
          },
        });
        res = res.data;
        if (res.code == 0) {
          const list = res.data;
          val.options = [];
          //初始化
          for (let i = 0; i < val.idx_list_def.length; i++) {
            const item = val.idx_list_def[i];
            val.idx_list[item] = {
              dirname: item,
              data: [],
            };
          }
          //遍历数据
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            //初始化目录信息

            if (item.web_type != null) {
              item.n_dir = item.web_type;
            }
            if (item.web_name != null) {
              item.n_name = item.web_name;
            }
            if (item.check_hide == true) {
              val.options.push({
                label: `[隐藏] -> [${item.n_dir}] -> ${item.n_name}`,
                value: item._id.$oid,
                px: 99999999,
              });
            } else {
              if (val.idx_list[item.n_dir] == null) {
                val.idx_list[item.n_dir] = {
                  dirname: item.n_dir,
                  data: [],
                };
              }
              //添加数据
              val.idx_list[item.n_dir].data.push({
                name: item.n_name,
                id: item._id.$oid,
                px: parseInt(item.px),
                img: item.img,
              });
              val.options.push({
                label: `[${item.n_dir}] -> ${item.n_name}`,
                value: item._id.$oid,
                px: parseInt(item.px),
                img: item.img,
              });
            }
          }

          val.idx_list = Object.values(val.idx_list);
          for (let i = 0; i < val.idx_list.length; i++) {
            const item = val.idx_list[i];
            const data = item.data;
            data.sort((a, b) => {
              return a.px - b.px;
            });
          }
          //搜索攻略根据px数值排序
          val.options.sort((a, b) => {
            return a.px - b.px;
          });
        } else {
          cfg.msg.error(`获取攻略列表失败`);
          return;
        }
      },
      //更新目录信息
      upd_dir_info: async (data) => {
        try {
          const res = await cfg.axios.get(`${cfg.url}`, {
            params: {
              t: "v2/introduction/gtidc",
              type: "img",
              type2: "upd_dir",
              ot: "gt",
              data: data,
              authkey: cfg.user.authkey,
            },
          });
          if (res.data.code == -1) {
            alert(`发生错误 ${res.data.msg}`);
            return;
          }
          const axdata = await ct.get_img_idc();
          val["idc_img"].list = axdata.data;
          data.n_dir = data.n_dir_upd;
          data.dir_px = data.dir_px_upd;
          await val["idc_img"].getidc(data.n_dir, "hover");

          cfg.msg.success(`编辑目录成功`, { duration: 2e3 });
          val["idc_img"].md_edit_dir = false;
          return res.data;
        } catch (error) {
          cfg.function.error(error);
        }
      },
      //获取该目录的攻略
      get_img_dirname: async (dirname) => {
        try {
          const res = await cfg.axios.get(`${cfg.url}`, {
            params: {
              t: "v2/introduction/gtidc",
              type: "img",
              type2: "get_idc_dirname",
              ot: "gt",
              dirname: dirname,
            },
          });
          if (res.data.code == -1) {
            alert(`发生错误 ${res.data.msg}`);
            return;
          }
          return res.data;
        } catch (error) {
          cfg.function.error(error);
        }
      },
      //获取图片攻略分类组
      get_img_idc: async (arr) => {
        try {
          const res = await cfg.axios.get(`${cfg.url}`, {
            params: {
              t: "v2/introduction/gtidc",
              type: "img",
              type2: "get_dir",
            },
          });
          if (res.data.code == -1) {
            alert(`发生错误 ${res.data.msg}`);
            return;
          }
          return res.data;
        } catch (error) {
          cfg.function.error(error);
        }
      },
      //切换类型
      swtype: (type) => {
        val.qs.type3 = type;
        cfg.router.push({
          query: {
            ...cfg.route.query,
            ...val.qs,
          },
        });
      },
    };

    onMounted(async () => {
      emit("update_load", false);
      const layBodyElement = document?.querySelector(".v2_body");
      cfg.sswd = layBodyElement?.offsetWidth;
      await ct.get_list();
    });

    return {
      comp,
      val,
      ct,
      cfg,
    };
  },

  watch: {},
});
</script>
